<!DOCTYPE html>
<meta charset="utf-8">

<html>
<head>
    <title>Upload Files using XMLHttpRequest - Minimal</title>

    <style type="text/css">
      .file-area {
        background-color: #FFCCCC;
        /*height: 2em;*/
        width: 100%;
        text-align: center;
        padding: 5px;
        padding-bottom: 5px;
      }
      .file-area-dragenter {
        background-color: #99CC00;
      }
    </style>
    <script type="text/javascript" src="/static/lib/jquery/jquery-1.12.4.min.js"></script>

    <script type="text/javascript">

      function uploadFile(file) {
        var fd = new FormData();
        fd.append("file", file);
        fd.append("type", "html5")
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "/file/upload_file");
        xhr.send(fd);
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = "进度: " + percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }

      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        // alert(evt.target.responseText);
        var responseText = evt.target.responseText;
        var data = responseText;
        document.getElementById("resultLink").innerHTML = "链接: " + data.link;
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }

      $(function () {
        function onDropFile(e) {
          e.preventDefault();
          console.log(e);
          var files = [];
          if (e.dataTransfer) {
            files = e.dataTransfer.files;
          } else if (e.originalEvent) {
            files = e.originalEvent.dataTransfer.files;
          }
          if (files.length > 0) {
            uploadFile(files[0]);
          }
        }

        function onDragEnter(e) {
          // console.log("drag enter", e);
          console.log($(e.target));
          e.preventDefault();
          $(e.target).addClass("file-area-dragenter");
        }

        function onDragLeave(e) {
          // console.log("drag leave", e);
          e.preventDefault();
          $(e.target).removeClass("file-area-dragenter");
        }

        function onDragOver(e) {
          e.preventDefault();
        }
        $(".file-area").on("drop", onDropFile);
        $(".file-area").on("dragenter", onDragEnter);
        $(".file-area").on("dragleave", onDragLeave);
        $(".file-area").on("dragover", onDragOver);

        if (typeof(Worker) !== undefined) {
          $("#uploadBtn").remove();
        }
      })

    </script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="POST" action="/file/upload_file">
    <div class="row">
        <div id="fileToUpload" class="file-area">拖拽文件到此处上传</div>
        <input id="uploadBtn" type="button" onclick="uploadFile()" value="上传文件" />
        <span id="progressNumber"></span>
        
    </div>
    <div id="resultLink"></div>
</form>

</body>